<style scoped lang='less'>
    /*.mynav {*/
    /*list-style-type: none;*/
    /*display: inline-block;*/
    /**display: inline;*/
    /*zoom: 1;*/
    /*}*/

    /*.mynav li {*/
    /*float: left;*/
    /*}*/

    /*.mynav li a {*/
    /*text-align: center;*/
    /*width: 120px;*/
    /*display: block;*/
    /*text-decoration: none;*/
    /*color: #cccccc;*/
    /*}*/

    /*.mynav li a img {*/
    /*width: 40px;*/
    /*height: 40px;*/
    /*margin: 0 auto;*/
    /*}*/
    .top-bg {
        position: relative;
        .tab-item {
            display: flex;
            .block {
                position: relative;
                width: 100px;
                height: 23px;
                .tab-btn-bg {
                    position: absolute;
                    background: url('../assets/image/tab_btn_bg.png');
                    /*background: url('../assets/image/tab_bg_click.png');*/
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    background-size: cover;
                    z-index: 1;
                }
                .tab-btn-bg:hover {
                    background: url('../assets/image/tab_bg_click.png');
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    background-size: cover;
                    z-index: 1;
                    /*background: url('../assets/image/tab_btn_bg.png');*/

                }
                .tab-btn-icon {
                    position: absolute;
                    left: 5px;
                    width: 15px;
                    top: 6px;
                    z-index: 9;
                }
                .tab-btn-text {
                    position: absolute;
                    left: 20px;
                    top: 3px;
                    z-index: 9;
                }
            }
        }
        .left {
            position: absolute;
            top: 65%;
            left: 20px;
        }
        .right {
            position: absolute;
            top: 65%;
            right: 20px;
        }

    }
</style>
<template>
        <div class="col-md-9 top-bg">
<!--            <img style="width: 100%" src="../assets/image/big_top.png" alt="">-->
            <div class="left tab-item">
                <a style="cursor: pointer;">
                    <div @click="jumpPage('','home')" class="block">
                        <img class="tab-btn-icon" src="../assets/image/tab_icon_xitong.png" alt="ICON"/>
                        <a class="tab-btn-bg">
                            <p class="tab-btn-text" style="color: white;font-size: 15px">系统管理</p>
                        </a>
                    </div>
                </a>
                <a style="cursor: pointer;">
                    <div @click="jumpPage('','ZbAdmin')" class="block">
                        <img class="tab-btn-icon" src="../assets/image/tab_btn_zhanbei.png" alt="ICON"/>
                        <a class="tab-btn-bg">
                            <p class="tab-btn-text" style="color: white;font-size: 15px">战备管理</p>
                        </a>
                    </div>
                </a>
                <a style="cursor: pointer;">
                    <div @click="jumpPage('','TrainAdmin')" class="block">
                        <img class="tab-btn-icon" src="../assets/image/tab_btn_xunlian.png" alt="ICON"/>
                        <a class="tab-btn-bg">
                            <p class="tab-btn-text" style="color: white;font-size: 15px">训练管理</p>
                        </a>
                    </div>
                </a>
                <a style="cursor: pointer;">
                    <div @click="jumpPage('','SafeAdmin')" class="block">
                        <img class="tab-btn-icon" src="../assets/image/tab_btn_huo.png" alt="ICON"/>
                        <a class="tab-btn-bg">
                            <p class="tab-btn-text" style="color: white;font-size: 15px">安全管理</p>
                        </a>
                    </div>
                </a>
                <a style="cursor: pointer;">
                    <div @click="jumpPage('','politicalAdmin')" class="block">
                        <img class="tab-btn-icon" src="../assets/image/tab_btn_zhenggong.png" alt="ICON"/>
                        <a class="tab-btn-bg">
                            <p class="tab-btn-text" style="color: white;font-size: 15px">政工管理</p>
                        </a>
                    </div>
                </a>
            </div>
            <div class="right tab-item">
                <a style="cursor: pointer;">
                    <div @click="jumpPage('','AfterAdmin')" class="block">
                        <img class="tab-btn-icon" src="../assets/image/tab_btn_houzhuang.png" alt="ICON"/>
                        <a class="tab-btn-bg">
                            <p class="tab-btn-text" style="color: white;font-size: 15px">后装管理</p>
                        </a>
                    </div>
                </a>
                <a style="cursor: pointer;">
                    <div @click="jumpPageWindow(oaUrl)" class="block">
                        <img class="tab-btn-icon" src="../assets/image/tab_btn_richang.png" alt="ICON"/>
                        <a class="tab-btn-bg">
                            <p class="tab-btn-text" style="color: white;font-size: 15px">日常办公</p>
                        </a>
                    </div>
                </a>
                <a style="cursor: pointer;">
                    <div @click="jumpPage('','home')" class="block">
                        <img class="tab-btn-icon" src="../assets/image/tab_btn_shezhi.png" alt="ICON"/>
                        <a class="tab-btn-bg">
                            <p class="tab-btn-text" style="color: white;font-size: 15px">系统设置</p>
                        </a>
                    </div>
                </a>
                <a style="cursor: pointer;">
                    <div @click="jumpPage('','home')" class="block">
                        <img class="tab-btn-icon" src="../assets/image/tab_btn_jinru.png" alt="ICON"/>
                        <a class="tab-btn-bg">
                            <p class="tab-btn-text" style="color: white;font-size: 15px">进入</p>
                        </a>
                    </div>
                </a>
            </div>
    </div>
</template>
<script>
    import apiUtil from '../assets/utils/api_util';

    export default {
        name: 'homeNav',
        data() {
            return {
                oaUrl: '',
            }
        },
        props: {},
        created() {
            this.getOAurl();

        },
        methods: {
            //跳转
            jumpPage: function (id, url) {
                let route = '';
                if (id.length > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id
                        },
                    };
                } else {
                    route = {
                        path: url,
                    };
                }
                this.$router.push(route);
            },
            jumpPageWindow: function (url) {
                window.location.href = url
            },
            //获取OA跳转地址
            getOAurl() {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetOASystemLink, para, function (res) {
                    that.$Loading.finish();
                    that.oaUrl = res.Msg;
                    console.log('OA地址.msg:', res.Msg)
                    console.log('OA地址.nomsg:', res)

                });

            },
        }
    }
</script>
<style>

</style>
